<template>
  <el-button class="cell" type="primary" :disabled="status === 2" plain>
    <template #icon>
      <!-- 选中 -->
      <svg v-if="status === 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
        <path fill="currentColor" d="M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896m-55.808 536.384-99.52-99.584a38.4 38.4 0 1 0-54.336 54.336l126.72 126.72a38.272 38.272 0 0 0 54.336 0l262.4-262.464a38.4 38.4 0 1 0-54.272-54.336z"></path>
      </svg>
      <!-- 禁用 -->
      <svg v-else-if="status === 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
        <path fill="currentColor" d="M512 896a384 384 0 1 0 0-768 384 384 0 0 0 0 768m0 64a448 448 0 1 1 0-896 448 448 0 0 1 0 896"></path>
        <path fill="currentColor" d="M745.344 361.344a32 32 0 0 1 45.312 45.312l-288 288a32 32 0 0 1-45.312 0l-160-160a32 32 0 1 1 45.312-45.312L480 626.752l265.344-265.408z"></path>
      </svg>
      <!-- 未选中 -->
      <svg v-else-if="status === 0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
        <path fill="currentColor" d="M512 896a384 384 0 1 0 0-768 384 384 0 0 0 0 768m0 64a448 448 0 1 1 0-896 448 448 0 0 1 0 896"></path>
      </svg>
    </template>
    {{ text }}
  </el-button>
</template>
<script setup lang="ts">
defineProps({
  status: {
    type: Number,
    default: 0,
  },
  text: {
    type: String,
    default: '',
  },
})
</script>
<style scoped lang="scss">
.cell {
  display: block;
  width: 100%;

  text-align: left;
  margin: 0px 0 16px;
}
</style>
